<template lang="">
  <div>
    <h2>药品列表</h2>
    <div style="display:flex;justify-content:space-between;width:80vw;border-bottom:1px solid #ccc;"> 
    <div>
      名字：<a-input-search :style="{width:'320px'}" placeholder="请输入" v-model="text" @search="onSearch"/>
    </div>
    <div>
      分类：<a-select :style="{width:'320px'}" v-model="values" placeholder="选择分类"  @change="onChanges()" allow-clear>
    <a-option v-for="item in datas">{{item.name}}</a-option>
  </a-select>
  </div>
    <a-space>
    <a-button type="primary">重置</a-button>
    <a-button type="outline">查询</a-button>
    </a-space>
  </div>
  
  <div style="margin-top:20px;width:80vw;">
    <div style="display:flex;justify-content:space-between;"> <p>药品分类</p> 
       <a-button type="primary" @click="handleClick">
      <template #icon >
        <icon-plus />
      </template>
新建
</a-button> 
</div>
<a-table :columns="columns" :data="data" :pagination="pagination">
  <template #index="{ rowIndex }">
          <span>{{ rowIndex + 1 }}</span>
  </template>
  <template #coverImage={record}>
    <a-image  width="50" height="90" :src="record.coverImage"/>
  </template>
  <template #op="{ record }" >
          <a-space #default="scope">
              <a-button type="primary" status="danger" size="mini">
                <template #icon>
                  <icon-delete @click="del(record.id)" />
               </template>

  </a-button>
  <a-button size="mini" type="primary">
    <template #icon>
          <icon-edit @click="edit(record.id,record)" /> 
                </template>
              </a-button>
  </a-space>
  </template>
</a-table>

</div>
<a-modal v-model:visible="visible" @ok="handleOk"  @cancel="handleCancel">
    <div>
    <p>名字</p>
    <a-input :style="{width:'320px'}" placeholder="请输入名字" allow-clear v-model="name" />
    <p>是否在库存</p>
    <a-space direction="vertical" @change="onChange"  size="large">
    <a-radio-group v-model="breao">
      <a-radio value="true">是</a-radio>
      <a-radio value="false">否</a-radio>
    </a-radio-group>
  </a-space>
    
    <p>分类</p>
    <div  >
      <a-select :style="{width:'320px'}" v-model="valuee" placeholder="选择分类" @change="anChange()"   allow-clear>
    <a-option v-for="item in datas" :key="item.id" :value="item.id" >{{item.name}}</a-option>
  </a-select>
  </div>
   
    <p>简介</p>
    <a-textarea :style="{width:'320px'}" placeholder="请输入简介" allow-clear v-model="desc" />
    <p>商品价格</p>
    <a-input :style="{width:'320px'}" placeholder="请输入商品价格" allow-clear v-model="price" />
    <p>库存</p>
    <a-input :style="{width:'320px'}" placeholder="请输入库存" allow-clear v-model="amount" />
    
    <p>图片</p>
     <a-upload
     v-model:file-list="fileList"
     list-type="picture-card"
    class="avatar-uploader"
     name="file"
     :show-upload-list="false"
   action="http://101.42.35.238:3006/common/upload"
   @success="onSuccess"
   
    >
  <a-button >
    <a-image  width="90"  src=""/>
  </a-button>
    </a-upload>
  </div>
  </a-modal>


  <a-modal v-model:visible="visibles" @ok="handleOkss"  @cancel="handleCancel">
    <div>
    <p>名字</p>
    <a-input :style="{width:'320px'}" placeholder="请输入名字" allow-clear v-model="name" />
    <p>是否在库存</p>
    <a-space direction="vertical" @change="onChange"  size="large">
    <a-radio-group v-model="breao">
      <a-radio value="true">是</a-radio>
      <a-radio value="false">否</a-radio>
    </a-radio-group>
  </a-space>
    
    <p>分类</p>
    <div  >
      <a-select :style="{width:'320px'}" v-model="valueee" placeholder="选择分类" @change="anChanges()"   allow-clear>
    <a-option v-for="item in datas" :key="item.id" :value="item.id" >{{item.name}}</a-option>
  </a-select>
  </div>
   
    <p>简介</p>
    <a-textarea :style="{width:'320px'}" placeholder="请输入简介" allow-clear v-model="desc" />
    <p>商品价格</p>
    <a-input :style="{width:'320px'}" placeholder="请输入商品价格" allow-clear v-model="price" />
    <p>库存</p>
    <a-input :style="{width:'320px'}" placeholder="请输入库存" allow-clear v-model="amount" />
    <p>图片</p>
     <a-upload
     v-model:file-list="fileList"
     list-type="picture-card"
    
     accept="image/*"
     method="post"
    class="avatar-uploader"
     name="file"
   action="http://101.42.35.238:3006/common/upload"
   @success="onSuccess"
    >
  <a-button >
    <a-image  width="90" src=""/>
  </a-button>
    </a-upload>
  </div>
  </a-modal>

  </div>
</template>
<script>
import { IconPlus, IconDelete, IconEdit } from '@arco-design/web-vue/es/icon'
import{imgs} from '../../tools/request'
import{getMedicineListAPI,getMedicineAPI,addMedicineListAPI,delMedicineListAPI,editMedicineListAPI,getMedicineListsAPI} from '../../api/api'
export default {
  components: { IconPlus, IconDelete,IconEdit},
  data(){
    return{
      fileList:[],  
categoryName:"",
      values:"",
      text:"",
      valuee:"",
      valueee:"",
      image:"",
      name:'',
      desc:"",
      amount:"",
      price:"",
      breao:"",
      isStanding:true,
      id:'',
      visible: false,
      visibles:false,
      pagination:{pageSize: 4},
      form:{
        name:"",
        desc:"",
        price:0,
        amount:0,
        image:"",
        tags:"",
        content:"",
        isStanding:true,
        medicineCategoryId:"",
        illnesses: [""]
      },
      forms:{
        name:"",
        desc:"",
        price:0,
        amount:0,
        image:"",
        tags:"",
        content:"",
        isStanding:true,
        medicineCategoryId:"",
        illnesses: [""]
      },
      datas:[{
        id: 1,
          name: '',
          amount: 1,
          desc: '',
          coverImage: '',
      }],
      data: [
        {
          id: 1,
          name: 'iphone 16 pro',
          amount: 12,
          desc: 'qeeqe',
          coverImage: '',
          categoryName:""
        },],
      columns: [
        {
          title: '序号',
          slotName: 'index',
        },
        {
          title: '名字',
          dataIndex: 'name',
        },
        {
          title: '主图',
          slotName: 'coverImage',
          dataIndex: 'coverImage',
        },
        {
          title:"价格",
          dataIndex:"price"

        },
        {
          title:"分类",
          dataIndex:"categoryName"
        },
        {
          title: '描述',
          dataIndex: 'desc',
          width: 500
        },
        {
          title: '操作',
          slotName: 'op',
          align: 'center',
        },
      ]
    }
  },
  methods:{
    handleClick() {
      console.log('ok');
      this.visible = true;
      this.name=''
      this.desc=''
      this.fileList=[]
    },
    handleCancel() {
      this.visible = false;
    },
    onSearch(text){
      this.data=[]
      getMedicineListsAPI(text).then(res=>{
        console.log(res);
        this.data=res.data.list.map((item)=>({
          ...item,
          coverImage:imgs(item.image)
        }))
        console.log(this.data);
      })

    },

    liat(){
      getMedicineListAPI().then(res=>{
        //console.log(res);
        this.data=res.data.list.map((item)=>({
          ...item,
          coverImage:imgs(item.image),
          categoryName:item.category.name
        }))
        console.log(this.data);
      })
    },
    // onProgress(event,file){
    //   console.log(event);
    //   this.form.image= event.url
    //   console.log(this.form);
    // },
    onSuccess(currentFile) {
      console.log(currentFile);
      this.form.image = currentFile.response.data
      console.log(this.image)
    },
    liatss(){
      getMedicineAPI().then(res=>{
       // console.log(res);
        this.datas=res.data.list
       
       // console.log(this.datas);
      })
    },
    //添加
    //是否
    onChange(){
      this.form.isStanding=JSON.parse(this.breao)
     // console.log(this.form);
    },
    //分类
    anChange(){
      this.form.medicineCategoryId=this.valuee
      console.log(this.form);
    },
    anChanges(){
      this.form.medicineCategoryId=this.valueee
    },
    //确定
    handleOk(){
      this.form.name=this.name
      this.form.desc=this.desc
      this.form.price=Number(this.price) 
      this.form.amount=Number(this.amount)
      console.log(this.form);
      addMedicineListAPI(this.form).then(res=>{
        console.log(res);
        this.liat()
        this.name=''
        this.price=''
        this.desc=''
        this.valuee=""
        this.amount=""

        

      })
    },
    //删除
    async del(id) {
      //console.log('ok');
     // console.log(id);
      let res = await delMedicineListAPI(id)
      //console.log(res);
      this.liat()
    },
    //修改
    edit(id,record){
      this.id=id
      console.log(record);
      this.visibles=true
      if(record){
        this.name=record.name
        this.desc=record.desc
        this.price=  record.price+""
        this.amount=record.amount+""
        this.fileList=[{url:record.coverImage}]
        this.valueee=record.medicineCategoryId
        this.breao=record.isStanding
        this.form.price=record.price
        this.form.medicineCategoryId=this.valueee
        this.form.isStanding=record.isStanding
        this.form.image=record.image
        this.form.price=Number(record.price) 
        this.form.amount=Number(record.amount)
      }

    },
    async handleOkss(){
      this.form.name=this.name
        this.form.desc=this.desc
        this.form.price=Number(this.price)
        this.form.amount=Number(this.amount)
      let res=await editMedicineListAPI(this.id,this.form)
      console.log(res);
      this.liat()
      this.visible=false
      this.name=''
      this.desc=''
      this.price=''
      this.amount=""

    },
    //选择分类
    onChanges(){
      this.categoryName=this.values
      console.log(this.categoryName);
        getMedicineListAPI().then(res=>{
          console.log(res);
          this.data=res.data.list.map((item)=>({
            ...item,
            categoryName:item.category.name,
            coverImage:imgs(item.image)
            
          }))
         // console.log(this.categoryName,this.data[0].categoryName)
         
         for (let i = 0; i < this.data.length; i++) {
          if (this.categoryName==this.data[i].categoryName) {
            //console.log(this.categoryName,this.data.categoryName);
            this.data=this.data.filter(item=>item.categoryName==this.categoryName)
            console.log(this.data);
          }
      
         }
          
        })
      
    }
  },
    mounted(){
    this.liat()
    this.liatss()
  },

  
}
</script>
<style lang="">
  
</style>